<template>
  <div style="margin-top:30px">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="所属仓库" prop="warehouseCode" style="margin-right:15px" label-width="100px">
              <el-select v-model="form.warehouseCode" placeholder="请输入所属仓库  " style="width:100%">
                <el-option
                  v-for="item in warehouseData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>

          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="库区编码" prop="serialNumber" style="margin-right:15px" label-width="100px">
              <el-input v-model="form.serialNumber" placeholder="请输入库区编码"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="库区名称" prop="name" style="margin-right:15px" label-width="100px">
              <el-input v-model="form.name" placeholder="请输入库区名称"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="温层" prop="temperature" style="margin-right:15px" label-width="100px">
              <el-select v-model="form.temperature" placeholder="请输入温层  " style="width:100%">
                <el-option
                  v-for="item in temperatureData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>

            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="额定温度" style="margin-right:15px" label-width="100px" prop="ratedMinTemperature" >
              <el-input-number v-model="form.ratedMinTemperature" :precision="2" placeholder="请输入最低温度" style="width:40%"></el-input-number>℃-              
              <el-input-number v-model="form.ratedMaxTemperature" :precision="2" placeholder="请输入最高温度" style="width:40%"></el-input-number>℃           
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" prop="remarks" style="margin-right:15px" label-width="100px">
              <el-input v-model="form.remarks" placeholder="请输入备注"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmit" :disabled="isDisable" plain>确 定</el-button>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import {warehouseSpaceAdd} from '@/api/basicInfo'

  Vue.use(VXETable)
  export default {
    props:{
      warehouseData:{
        type: Array,
        required: true
      }
    },
    data() {
      return {
        isDisable:false,   //确定键显示按钮
        temperatureData:[
          { code: "常温", name: "常温" },
          { code: "冷藏",name: "冷藏" },
          { code: "冷冻",name: "冷冻" },
        ],
        form: {
          code: '',                  //数据标识 ,
          name: '',                  //库区名称 ,
          ratedMaxTemperature: '',   //额定最高温度 ,
          ratedMinTemperature: '',   //额定最低温度 ,
          remarks: '',               //备注 ,
          serialNumber: '',          //库区编码 ,
          status: '',                //状态 ,
          temperature: '',           //温层 ,
          total: '',                 //总数 ,
          warehouseCode: '',         //所属仓库
          remarks: '',               //备注
        },
        rules: {
          name: [
            {required: true, message: '请输入库区名称', trigger: 'blur'},
          ],
          temperature: [
            {required: true, message: '请输入温层', trigger: 'blur'},
          ],

          serialNumber: [
            {required: true, message: '请输入库区编码', trigger: 'blur'},
          ],
          warehouseCode: [
            {required: true, message: '请输入所属仓库', trigger: 'blur'},
          ],
        },
      }
    },
    created() {
      if(this.warehouseData.length === 1){
        this.form.warehouseCode = this.warehouseData[0].code
      }
    },
    methods: {
      // 重置
      reset() {
        this.$refs['form'].resetFields()
        this.form.ratedMaxTemperature = ''
      },
      // 提交
      funcSubmit() {
        const data = this.form
        if(data.ratedMinTemperature&&data.ratedMaxTemperature){
          if(data.ratedMinTemperature <= data.ratedMaxTemperature){
            this.isDisable = true
            warehouseSpaceAdd(data).then(response => {
              this.$message({message: response.msg, type: 'success'})
              this.$emit('fatherAddMethod')
              this.isDisable = false
            }).catch(() => this.isDisable = false)
          }else{
            this.isDisable = false
            this.$message({message: '最低温度不能大于最高温度', type: 'error'})
          }
        }else{
          this.isDisable = true
          warehouseSpaceAdd(data).then(response => {
            this.$message({message: response.msg, type: 'success'})
            this.$emit('fatherAddMethod')
            this.isDisable = false
          }).catch(() => this.isDisable = false)
        }
      },
      // 取消
      funcCancel() {
        this.$emit('fatherCancelMethod', 'add')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
  }
</style>
